/**
* 修改用户
*/
<template>
    <vp-dialog ref="editDialogRef">
        <template #title>
            <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left" />
            <vp-label v-else zh="修改" en="Edit" align="left" />
        </template>
        <el-form v-loading="loading" :model="formData" :rules="formRules" ref="formRef" label-width="120px"
            :scroll-to-error="true">
            <vp-card>
                <el-row>
                    <vp-col>
                        <el-form-item prop="username">
                            <template #label><vp-label zh="用户名" en="UserName" align="left" /></template>
                            <el-input v-model="formData.username" v-trim :disabled="type === 'edit'" maxlength="30">
                            </el-input>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="realname">
                            <template #label><vp-label zh="姓名" en="Name" /></template>
                            <el-input class="w100" v-model="formData.realname" v-trim maxlength="100">
                                <template #prefix></template>
                            </el-input>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="cellphone">
                            <template #label><vp-label zh="手机" en="Mobile" /></template>
                            <el-input v-model="formData.cellphone" v-trim maxlength="20"></el-input>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="phone">
                            <template #label><vp-label zh="电话" en="Phone" /></template>
                            <el-input v-model="formData.phone" v-trim maxlength="20"></el-input>
                        </el-form-item>
                    </vp-col>
                </el-row>
                <el-row>
                    <vp-col>
                        <el-form-item prop="sex">
                            <template #label><vp-label zh="性别" en="Sex" /></template>
                            <el-select v-model.number='formData.sex' class="w100">
                                <el-option :value=1 label="男/Male"><vp-label zh="男" en="Male" /></el-option>
                                <el-option :value=2 label="女/Female"><vp-label zh="女" en="Female" /></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="email">
                            <template #label><vp-label zh="邮箱" en="Email" /></template>
                            <el-input v-model="formData.email" v-trim maxlength="300"></el-input>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="bmdm">
                            <template #label><vp-label zh="部门" en="Department" /></template>
                            <vp-department-select-tree :selectedId="formData.bmdm"
                                :selectedText="formData.department.dprtname" @treeSelected="handleDepartmentSelected"
                                class="w100"></vp-department-select-tree>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="jddm">
                            <template #label><vp-label zh="基地" en="Model" /></template>
                            <VpBaseSelectTree :selectedId="formData.jddm" @treeSelected="handleBaseSelected"
                                class="w100">
                            </VpBaseSelectTree>
                        </el-form-item>
                    </vp-col>
                    <vp-col>
                        <el-form-item prop="zw">
                            <template #label><vp-label zh="职务" en="Position" /></template>
                            <el-input v-model="formData.zw" v-trim maxlength="100"></el-input>
                        </el-form-item>
                    </vp-col>
                    <vp-col :span="1">
                        <el-form-item prop="qm">
                            <template #label><vp-label zh="签名" en="Signature" /></template>
                            <el-upload action="" ref='uploadList' :before-upload="beforeUploadImg"
                                :before-remove="beforeRemove" :show-file-list="false" accept=".jpg,.png,.jpeg">
                                <img :src="'data:image/png;base64,' + formData.zp.base64" alt=""
                                    style="width: 100px;height: 100px;" v-if="formData.zp.base64">
                                <el-button type="primary" class="mr-20" v-else>
                                    <vp-label zh="上传" en="Upload" />
                                    <SvgIcon name="ele-Upload" class="el-icon--right"></SvgIcon>
                                </el-button>
                            </el-upload>
                            <SvgIcon name="elementClose"
                                style="position: absolute;font-size: 14px;top: 10px;left: 110px;" @click="removePicture"
                                v-if="formData.zp.base64"></SvgIcon>
                        </el-form-item>
                    </vp-col>
                </el-row>
            </vp-card>

            <vp-card>
                <template #header><vp-label zh="角色" en="Role" /></template>
                <el-transfer v-loading="roleLoading" style="width:100%;text-align:center" v-model="formData.roleIdList"
                    :props="{
                        key: 'id',
                        label: 'roleName'
                    }" :titles="['未选择/Unselected', '已选择/Selected']" :data="roleData">

                </el-transfer>
            </vp-card>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave" />
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="systemUserEdit">
import { onMounted, ref } from 'vue'
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

import VpBaseSelectTree from '/@/components/vp/base/VpBaseSelectTree.vue';

const emits = defineEmits(['formSubmited']);
const formData = ref({
    id: "",
    username: "",
    realname: "",
    cellphone: "",
    phone: "",
    sex: null,
    email: "",
    bmdm: "",
    department: {
        dprtname: "",
    },
    jddm: "",
    zw: "",
    roleIdList: [],
    zp: {
        cflj: ''
    },
});
const formRules = {
    username: [
        validateUtils.notNull,
        validateUtils.notChinese
    ],
    realname: [
        validateUtils.notNull
    ],
    cellphone: [
        validateUtils.notChinese
    ],
    phone: [
        validateUtils.notChinese
    ],
    email: [
        validateUtils.email
    ],
}
const roleData = ref([]);
const loading = ref(false);
const saveLoading = ref(false);
const roleLoading = ref(false);
const type = ref('add');

const editDialogRef = ref();
const formRef = ref();

// 清空数据
const initFormData = () => {
    formData.value = {
        id: "",
        username: "",
        realname: "",
        cellphone: "",
        phone: "",
        sex: null,
        email: "",
        bmdm: "",
        department: {
            dprtname: "",
        },
        jddm: "",
        zw: "",
        roleIdList: [],
        zp: {
            cflj: ''
        },
    }
}

// 组件挂载后事件
onMounted(() => {
    loadRoleData();
})

// 加载角色清单
const loadRoleData = () => {
    roleLoading.value = true;
    request.get('/system/role/list').then((data) => {
        roleData.value = data?.data || [];
    }).finally(() => roleLoading.value = false)
}

// 保存
const handleSave = () => {
    if (loading.value) {
        return;
    }
    saveLoading.value = true;
    formRef.value.validate((valid: Boolean) => {
        if (valid) {
            request.post("/system/user/" + type.value, {
                ...formData.value
            }).then(() => {
                emits("formSubmited");
                editDialogRef.value.handleClose();
            }).catch(() => {
            }).finally(() => {
                saveLoading.value = false;
            })
        } else {
            saveLoading.value = false;
        }
    })
}

// 打开弹窗
const handleOpen = (__type: string, id: string) => {
    type.value = __type;
    initFormData();
    editDialogRef.value.handleOpen();
    if (__type === 'edit') {
        loading.value = true;
        request.get(`/system/user/${id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data
            };
            if (formData.value.dzqmid) {
                request.get(`/file/base64/${formData.value.dzqmid}`).then(res => {
                    if (res.data) {
                        formData.value.zp.base64 = res.data
                    }
                });
            }
            loading.value = false;
        })
    }
}

// 选择部门后回调事件
const handleDepartmentSelected = (data: any) => {
    formData.value.bmdm = data.id;
    formData.value.department.dprtname = data.label;
}

// 上传文件之前的方法
const beforeUploadImg = (file: any) => {
    if (file) {
        let submitData = new FormData();
        submitData.append("file", file);
        loading.value = true;
        request.post(`/file/upload`, submitData, {
            headers: {
                'content-type': 'multipart/form-data'
            }
        }).then(res => {
            loading.value = false;
            formData.value.zp = res.data[0];
            request.get(`/file/base64/${formData.value.zp.id}`).then(res => {
                if (res.data) {
                    formData.value.zp.base64 = res.data
                }
            });
        });
    }
    return false;
}

// 选择基地后回调事件
const handleBaseSelected = (data: any) => {
    formData.value.jddm = data.id;
}

// 移除图片
const removePicture = () => {
    formData.value.zp = {} as any
}

defineExpose({
    handleOpen,
})

</script>
